<template>
  <div class="review">
    <layout>
      <h1>
        Review Recommend
      </h1>
      <review-search class="top" @load="load" @loaded="loadedFunc"></review-search>
      <transition name="fade">
        <article class="main" v-if="loaded">
          <section>
            <div class="result-infomation">
              <div class="label"></div>
              <span>
                Results for Recommended Reviewers
              </span>
            </div>
            <div class="content">
              <div class="items">
                <item v-for="item in authors" :key="item.id" :author="item" class="item">
                  {{item.name}}
                </item>
              </div>
            </div>     
          </section>
        </article>
        <div v-else class="search-loading">
          <div v-if="ready">
            <h3>
              Wait For Submit
            </h3>
          </div>
          <loading v-else></loading>

        </div>
      </transition>
    </layout>
  </div>
</template>

<script>
import request from "@/requests";

import Accordion from "@/components/Once/Search/Accordion/index";
import Year from "@/components/Once/Search/SideBar/SearchSideBar";
import Item from '@/components/Block/AuthorSearchBlock';
import Pagination from '@/components/Once/Search/Pagination/SearchPagination.vue';
import Loading from '@/components/Loading/index';

import Layout from '@/layout/index';
import ReviewSearch from './ReviewSearch';

export default {
  name: "Review",
  props: {

  },
  data() {
    return {
      authors: [],
      amount: 'Loading',
      loaded: false,
      ready: true
    };
  },
  computed: {
  },
  mounted() {
  },
  watch: {
  },
  methods: {
    init() {
    },
    load() {
      this.loaded = false;
    },
    loadedFunc(authors) {
      this.loaded = true;
      this.ready = false;
      this.authors = authors;
    }
  },
  components: {
    Accordion,
    Year,
    Item,
    Pagination,
    Loading,
    Layout,
    ReviewSearch
  },
};
</script>

<style scoped lang="scss">
.review {
  h1 {
    margin: 40px 0;
    text-align: center;
  }

  .top {
    margin: 0 auto;
    width: 1260px;
    @media screen and (max-width: 1280px){
      margin-left: 2px;
      margin-right: 2px;
      width: auto;
    }
  }

  article {
    display: flex;
    // align-items: flex-start;
    flex-wrap: wrap;
    width: 1260px;
    margin: 20px auto;
    transition: ease-in-out .25s;
    
    // @media screen and (max-width: 1280px){
    //   width: 1000px;
    // }

    @media screen and (max-width: 1280px){
      margin-left: 2px;
      margin-right: 2px;
      width: auto;
    }

    section {
      padding: 30px 15px;
      @media screen and (max-width: 500px){
        padding: 30px 5px;
      }
      min-width: 670px;
      @media screen and (max-width: 720px){
        min-width: 300px;
      }
      flex: 1;
      .result-infomation {
        display: flex;
        align-items: center;

        .label {
          border-left: 8px solid #000;
          padding-left: 6px;
          border-color: #ebc34a;
          display: inline-block;
          height: 18px;
        }

        span {
          font-style: italic;
          padding-left: 10px;
          font-size: 18px;
          font-family: Merriweather Sans,sans-serif;

          &.bold-font {
            font-weight: 600;
          }
        }
      }

      .content {

        .items {
          margin-top: 30px;
          display: flex;
          flex-wrap: wrap;
          justify-content: space-around;

          @media screen and (max-width: 610px){
            justify-content: center;
          }
          .item {
            margin-bottom: 20px;
          }
        }

        .pages {
          display: flex;
          justify-content: center;
        }
      }



    }
  }
  .search-loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%);
  }
}
</style>
